<template>
  <div>
    <div class="topNav">
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="quit"
      />
    </div>
    <div class="bgimg">
      <img src="../assets/images/bg2.png" alt="" />
    </div>
    <div class="content">
      <van-tabs v-model="activeName" @click="checkOrder">
        <div class="bg">


          <van-tab title="全部" name="a">
            <div class="order" v-for="(item, index) in list" :key="index">
              <div class="toptitle">
                <div class="oid">{{ item.oid }}</div>
                <div class="status" @click="sureOrder(item)">
                  {{ item.status == 1 ? "确认收货" : "已完成" }}
                </div>
                <van-icon name="delete-o" size="18" v-if="item.status !== 1" 
                @click="deleteOrder(item)"/>
              </div>
              <div v-for="(item, index) in item.data" :key="index">
                <Good :isSlide="false" :goodData="item" :isHasCheckbox="false">
                  <div class="num">x{{ item.count }}</div>
                </Good>
              </div>
              <div class="date">{{ item.date }}</div>
              <div class="bottomprice">
                总计 {{ item.total }} 件
                <span>合计 &yen; &nbsp;&nbsp;{{ item.money }}</span>
              </div>
            </div>
            <van-empty description="快去选购商品吧" v-if="list.length === 0" />
          </van-tab>

          
          <van-tab title="进行中" name="b">
            <div class="order" v-for="(item, index) in list" :key="index">
              <div class="toptitle">
                <div class="oid">{{ item.oid }}</div>
                <div class="status" @click="sureOrder(item)" >确认收货</div>
              </div>
              <div v-for="(item, index) in item.data" :key="index">
                <Good :isSlide="false" :goodData="item" :isHasCheckbox="false">
                  <div class="num">x{{ item.count }}</div>
                </Good>
              </div>
              <div class="bottomprice">
                总计 {{ item.total }} 件
                <span>合计 &yen;&nbsp;&nbsp;{{ item.money }}</span>
              </div>
            </div>
            <van-empty description="快去选购商品吧" v-if="list.length === 0" />
          </van-tab>


          <van-tab title="已完成" name="c">
            <div class="order" v-for="(item, index) in list" :key="index">
              <div class="toptitle">
                <div class="oid">{{ item.oid }}</div>
                <div class="status">已完成</div>
                <van-icon name="delete-o" size="18"
                @click="deleteOrder(item)"/>
              </div>
              <div v-for="(item, index) in item.data" :key="index">
                <Good :isSlide="false" :goodData="item" :isHasCheckbox="false">
                  <div class="num">x{{ item.count }}</div>
                </Good>
              </div>
              <div class="bottomprice">
                总计 {{ item.total }} 件
                <span>合计 &yen; &nbsp;&nbsp;{{ item.money }}</span>
                
              </div>
            </div>
            <van-empty description="快去选购商品吧" v-if="list.length === 0" />
          </van-tab>
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Good from "../components/Good";
export default {
  name: "Myorder",
  data() {
    return {
      activeName: "a",
      list: [],
    };
  },
  components: {
    Good,
  },
  methods: {
    // 返回上一级
    quit() {
      // this.$router.go(-1);
      this.$router.push({name:"My"})
    },
    // 查询订单
    checkOrder(name, title) {
      let token = this.$cookies.get("TOKEN");
      let status = "";
      if (title === "全部") {
        status = 0;
      } else if (title === "进行中") {
        status = 1;
      } else if (title === "已完成") {
        status = 2;
      }
      this.axios({
        method: "GET",
        url: "/findOrder",
        params: {
          tokenString: token,
          status,
        },
      })
        .then((res) => {
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }
          if (res.data.code == 70000) {
            res.data.result.forEach((v) => {
              v.small_img = `${v.smallImg}`;
            });
            let list = res.data.result;
            this.checkOid(list);
          }
        })
        .catch((err) => {
          
        });
    },
    // 处理数据
    checkOid(list) {
      // 获取订单编号
      let oids = [];
      list.forEach((v) => {
        if (oids.indexOf(v.oid) === -1) {
          oids.push(v.oid);
        }
      });

      //按照订单编号分类
      // [
      //   {
      //     orderId: 订单编号
      //     date: 日期
      //     total: 数量,
      //     money: 总金额,
      //     status: 订单状态
      //     商品数据
      //     data: [
      //       {},
      //       {},
      //       ...
      //     ]
      //   }
      // ]

      let orderData = [];
      oids.forEach((v1) => {
        // 新建一个order对象
        let order = {
          oid: v1,
          date: "",
          total: 0,
          money: 0,
          status: -1,
          data: [],
        };
        // 查找订单
        list.forEach((v2) => {
          if (v1 === v2.oid) {
            if (!order.date) {
              order.date = v2.createdAt;
            }

            if (order.status === -1) {
              order.status = v2.status;
            }

            order.total += v2.count;
            order.money += v2.count * v2.price;

            order.data.push(v2);
          }
        });
        order.money = order.money.toFixed(2);
        orderData.push(order);
      });
      // 
      this.list = orderData;
    },
    // 确认收货
    sureOrder(item) {
      if(item.status == 2){
        return
      }
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认收货？",
        })
        .then(() => {
          //发起确认收货请求
          let token = this.$cookies.get("TOKEN");

          this.axios({
            method: "POST",
            url: "/receive",
            data: {
              tokenString: token,
              oid: item.oid,
            },
          })
            .then((res) => {
              if (res.data.code == 700) {
                //用户未登录, 拦截操作, 通知用户去登录
                this.$toast("请先登录");
                setTimeout(() => {
                  this.$router.push({ name: "Login" });
                }, 2000);

                return;
              }

              this.$toast(res.data.msg);

              if (res.data.code === 80000) {
                item.status = 2;
                //如果是在进行中订单确认收货，需要移除订单数据
                if (this.activeName === 'b') {
                  for (let i = 0; i < this.list.length; i++) {
                    if (item.oid === this.list[i].oid) {
                      this.list.splice(i,1);
                      return;
                    }
                  }
                }
              }
            })
            .catch((err) => {
              
            });
        })
        .catch((err) => {
          
        });
    },
    // 删除订单
    deleteOrder(item){
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认删除该订单？",
        })
        .then(() => {
          //发起确认收货请求
          let token = this.$cookies.get("TOKEN");

          this.axios({
            method: "POST",
            url: "/removeOrder",
            data: {
              tokenString: token,
              oid: item.oid,
            },
          })
            .then((res) => {

              if (res.data.code == 700) {
                //用户未登录, 拦截操作, 通知用户去登录
                this.$toast("请先登录");
                setTimeout(() => {
                  this.$router.push({ name: "Login" });
                }, 2000);

                return;
              }
              
              this.$toast(res.data.msg);

              if (res.data.code === 90000) {
                  for (let i = 0; i < this.list.length; i++) {
                    if (item.oid === this.list[i].oid) {
                      this.list.splice(i,1);
                      return;
                    }
                  }
            
              }
            })
            .catch((err) => {
              
            });
        })
        .catch((err) => {
          
        });
    }
  },
  created() {
    this.checkOrder(0);
  },
};
</script>

<style lang="less" scoped>
.topNav {
  position: sticky;
  top: 0;
  /deep/ .van-nav-bar__text {
    color: #0c34ba;
  }
  /deep/ .van-nav-bar .van-icon {
    color: #0c34ba;
  }
}
.price {
  border-top: 1px solid rgba(22, 22, 22, 0.2);
  padding: 10px 5px;
  font-size: 14px;
  span {
    position: absolute;
    right: 20px;
  }
}
.order {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  font-size: 12px;
  color: rgb(100, 101, 102);
  .toptitle {
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .oid {
      flex: 1;
    }
    .status {
      flex: 1;
      text-align: right;
      margin-right: 5px;
    }
  }
}
.bgimg {
  width: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.content {
  background-color: white;
  position: fixed;
  top: 140px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 10px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  padding: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  .bg {
    margin-top: 10px;
    .num {
      position: relative;
      right: 10px;
      bottom: 0px;
    }
  }
  .date {
    padding: 5px;
  }
  .bottomprice {
    padding: 5px;
    font-size: 14px;
    span {
      position: absolute;
      right: 10px;
      color: red;
    }
  }
  /deep/ .van-tabs__line {
    color: #0c34ba;
    background: #0c34ba;
  }
  /deep/ .van-tabs__nav .van-tabs__nav--line {
    position: sticky;
    top: 0;
  }
  /deep/ .van-tabs__content {
    position: fixed;
    top: 200px;
    left: 10px;
    right: 10px;
    bottom: 0;
    overflow-y: auto;
    background-color: rgba(247, 247, 247);
  }
}
</style>